<template>
  <div>
    <el-tabs v-model="activeName" :style="{ background: 'white', 'padding': businessId ? '15px' : '0' }" @tab-click="handleClick">
      <el-tab-pane :label="$t('运营指标')" name="YY" style="overflow: auto">
        <div>
          <el-form ref="queryForm" :model="queryParams" :inline="true" @submit.native.prevent>
            <el-form-item :label="$t('一级指标')" prop="indicators">
              <el-input
                v-model="queryParams.indicators"
                :placeholder="$t('一级指标')"
                clearable
                :onsubmit="false"
                @keyup.enter.native="queryHandle"
              />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t('搜索') }}</el-button>
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t('重置') }}</el-button>
              <el-button
                v-hasPermi="['deal:indicator:edit']"
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="addHandle"
              >{{ $t('新增') }}
              </el-button>
              <el-button
                v-hasPermi="['deal:indicator:edit']"
                type="success"
                icon="el-icon-check"
                size="mini"
                @click="submitSort"
              >{{ $t('保存排序') }}
              </el-button>
            </el-form-item>
          </el-form>
          <el-table v-loading="loading" :data="dealIndicatorPredictList" row-key="id" border class="dataForm" :style="{ 'margin-top': businessId ? '0' : '45px' }">
            <el-table-column :label="$t('指标')" align="left" prop="indicators" min-width="280" />
            <el-table-column :label="$t('级别')" align="center" prop="grade" :formatter="gradeFormat" min-width="100" />
            <el-table-column :label="$t('排序')" align="center" prop="sort" min-width="100">
              <template slot-scope="scope">
                <el-input v-model="scope.row.sort" />
              </template>
            </el-table-column>
            <el-table-column :label="$t('操作')" align="center" class-name="small-padding fixed-width" :min-width="parentGrade !== '1' ? '250' : '150'">
              <template slot-scope="scope">
                <el-button
                  v-hasPermi="['deal:indicator:edit']"
                  size="small"
                  type="text"
                  icon="el-icon-edit"
                  @click="updateHandle(scope.row.id)"
                >{{ $t('修改') }}
                </el-button>
                <el-button
                  v-hasPermi="['deal:indicator:remove']"
                  size="small"
                  type="text"
                  icon="el-icon-delete"
                  @click="deleteHandle(scope.row)"
                >{{ $t('删除') }}
                </el-button>
                <el-button
                  v-if="scope.row.grade !== '2'"
                  v-hasPermi="['deal:indicator:edit']"
                  size="small"
                  type="text"
                  icon="el-icon-edit"
                  @click="addNextHandle(scope.row)"
                >{{ $t('新增下级指标') }}
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="$t('关键指标')" name="GJ" style="overflow: auto">
        <dealIndicatorPredictKeyList ref="dealIndicatorPredictKeyList" />
      </el-tab-pane>
    </el-tabs>
    <!-- 添加或修改盈利预测配置对话框 -->
    <el-dialog :title="$t(title)" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" :destroy-on-close="true" custom-class="dialogForm" append-to-body>
      <dealIndicatorPredictForm ref="dealIndicatorPredictForm" />
    </el-dialog>
  </div>
</template>

<script>
import { getAllData, delDealIndicatorPredict, updateSort, initCurrentData } from '@/api/deal/indicator/dealIndicatorPredict'
import dealIndicatorPredictKeyList from '@/views/deal/indicator/dealIndicatorPredictKeyList.vue'
import dealIndicatorPredictForm from './dealIndicatorPredictForm.vue'

export default {
  components: {
    dealIndicatorPredictForm,
    dealIndicatorPredictKeyList
  },
  data() {
    return {
      // 遮罩层
      loading: false,
      // 盈利预测配置表格数据
      dealIndicatorPredictList: [],
      // 弹出层标题
      title: '盈利预测配置',
      // 是否显示弹出层
      formOpen: false,
      typeId: undefined,
      // 级别字典
      gradeOptions: [],
      // 当前父级别
      parentGrade: '0',
      // 查询参数
      queryParams: {
        typeId: undefined,
        businessId: this.$route.query.companyId,
        parentId: '0',
        indicators: undefined
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {},
      activeName: 'YY',
      businessId: this.$route.query.companyId,
      isInitData: true
    }
  },
  created() {
    this.getList()
    this.getDicts('indicator_grade').then(response => {
      this.gradeOptions = response.data
    })
  },
  methods: {
    init(data) {
      // 运营指标
      this.typeId = data.id
      this.queryParams.typeId = data.id
      this.getList()
    },
    handleClick(tab) {
      if (tab.name === 'YY') {
        this.getList()
      } else if (tab.name === 'GJ') {
        // 关键指标
        this.$nextTick(() => {
          this.$refs.dealIndicatorPredictKeyList.typeId = this.typeId
          this.$refs.dealIndicatorPredictKeyList.getList()
        })
      }
    },
    /** 查询盈利预测配置列表 */
    getList() {
      this.loading = true
      getAllData(this.queryParams).then(response => {
        this.dealIndicatorPredictList = response.rows
        this.loading = false
        // 判断当前项目是否需要初始化
        if (this.dealIndicatorPredictList !== null && this.dealIndicatorPredictList.length <= 0) {
          if (this.$route.query.id !== undefined && this.isInitData) {
            this.isInitData = false
            this.initCurrentData()
          }
        }
      })
    },
    initCurrentData() {
      this.msgInfo(this.$t('正在初始化数据, 请稍后!'))
      this.loading = true
      initCurrentData(this.$route.query.id, this.$route.query.companyId).then(response2 => {
        this.msgSuccess(this.$t('初始化完成!'))
        this.loading = false
        if (response2.data > 0 || parseInt(response2.data) > 0) {
          this.getList()
        }
      })
    },
    // 级别字典翻译
    gradeFormat(row) {
      return this.selectDictLabel(this.gradeOptions, row.grade)
    },
    // 查看下级指标
    // viewNext(row) {
    //   this.parentGrade = row.grade
    //   this.queryParams.parentId = row.id
    //   this.getList()
    // },
    // 保存排序
    submitSort() {
      var data = { children: [] }
      for (let i = 0; i < this.dealIndicatorPredictList.length; i++) {
        data.children.push({
          sort: this.dealIndicatorPredictList[i].sort,
          id: this.dealIndicatorPredictList[i].id,
          children: this.dealIndicatorPredictList[i].children
        })
      }
      this.loading = true
      updateSort(data).then(response => {
        if (response.code === 200) {
          this.getList()
          this.loading = false
          this.msgSuccess(this.$t('修改成功'))
        } else {
          this.msgError(response.msg)
        }
      })
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        businessId: this.$route.query.companyId,
        parentId: undefined,
        grade: undefined,
        indicators: undefined,
        sort: undefined,
        remark: undefined,
        createBy: undefined,
        createTime: undefined,
        updateBy: undefined,
        updateTime: undefined,
        delFlag: undefined
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    queryHandle() {
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.queryHandle()
    },
    /** 新增按钮操作 */
    addHandle() {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.dealIndicatorPredictForm.init(null, this.typeId)
      })
    },
    // 新增下级指标
    addNextHandle(row) {
      this.formOpen = true
      this.$nextTick(() => {
        this.$refs.dealIndicatorPredictForm.initJunior(row, this.typeId)
      })
    },
    /** 修改按钮操作 */
    updateHandle(id) {
      this.formOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealIndicatorPredictForm.init(id, this.typeId)
      })
    },
    /** 删除按钮操作 */
    deleteHandle(row) {
      this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
        confirmButtonText: this.$t('确定'),
        cancelButtonText: this.$t('取消'),
        type: 'warning'
      }).then(function() {
        return delDealIndicatorPredict(row.id)
      }).then(() => {
        this.getList()
        this.msgSuccess(this.$t('删除成功'))
      }).catch(function() {
      })
    }
  }
}
</script>
